<template>
      <h1>{{ num  }}========{{ username }}</h1>
      <button @click="num++">改变num</button>
      <button @click="username='李四'">改变username</button>
      <hr>
      <h1>{{ obj }}</h1>
      <button @click="obj.age++">修改obj</button>
</template>
<!-- // setup作为script的属性 是 setup函数的语法糖 -->
<script setup>
 import {watch , ref} from 'vue'
 let num = ref(0)
 let username = ref('张三')
// 监听 ref创建的基本类型 数据源不带value
 watch([num,username],([newNum,newName],[oldNum,oldName])=>{
  console.log(newNum,newName ,'---',oldNum,oldName);
 })
//  =========================
let obj = ref({
  age:18,
  uname:"AA"
})
// 如果 直接监听 引用类型或者基本类型 则不需要加value
// 如果 监听引用类型的某个数据 则 必须 加value
watch(()=>obj.value.age,(o)=>{
  console.log(o);
})
</script>
<script>
export default {
  name: 'App',
}
</script>
